<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div{width:200px;height:200px;background: #0ff;position: absolute;left:0;top:0;}
        </style>
    </head>
    <body>
        <div>TODO write content</div>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var divx = 0;
            var divy = 0;
            $("div").mousedown(function (ev) {
                divx = ev.pageX - $("div").offset().left;
                divy = ev.pageY - $("div").offset().top;
                $(document).mousemove(function (ev) {
                    var x = ev.pageX - divx;
                    var y = ev.pageY - divy;
                    $("div").css({"left": x,"top":y});
                });
            });
            $("div").mouseup(function(ev){
                    $(document).off();
                });
        </script>
    </body>

</html>
